<template>

  <div class="container">
    <!--<black-page></black-page>-->
    <my-driver></my-driver>
    <div class="add-driver" @click="showAdd">
      <span class="addIcon"></span>
      <span>添加信任的司机</span>
    </div>
    <!-- 添加司机 -->
    <div class="mask" v-if="isShow">
      <div class="popup">
        <div class="popup-title">添加到我的司机</div>
        <input class="popInput" type="text" placeholder="请输入司机手机号">
        <div class="popupBtn">
          <div class="pop-cel" @click="popCel">取消</div>
          <div class="pop-ent" @click="popEnt">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import blackPage from '../../../../components/blackPage/blackPage'
import myDriver from '../../../../components/myDriver/myDriver'
export default {
  data () {
    return {
      isShow: false
    }
  },
  components: {
    blackPage,
    myDriver
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '我的司机'
    })
  },
  methods: {
    showAdd () {
      this.isShow = true
    },
    popCel () {
      this.isShow = false
    },
    popEnt () {
      this.isShow = false
    }
  }
}
</script>

<style scoped>
.add-driver{
  display: flex;
  justify-content: center;
  margin-top: 100rpx;
}
  .addIcon{
    width: 40rpx;
    height: 40rpx;
    background: url("~static/img/append.png") no-repeat center/cover;
    display: inline-block;
    margin-right: 20rpx;
  }
  .add-driver span{
    line-height: 40rpx;
    font-size: 32rpx;
    color: #ed493d;
  }
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #ababab;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popup{
    width: 562rpx;
    height: 265rpx;
    background-color: #f6f6f6;
    padding: 44rpx 44rpx 35rpx 44rpx;
    box-shadow: 0rpx 5rpx 0rpx #eee;
    border: 2rpx solid #eeeeee;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .popup-title{
    font-size: 34rpx;
    color: #353535;
  }
  .popInput{
    background-color: #f3f3f3;
    height: 78rpx;
    padding-left: 34rpx;
    width: 100%;
    font-size: 28rpx;
    color: #c0c0c0;
  }
  .popupBtn{
    display: flex;
    justify-content: space-between;
    width: 75%;
  }
  .popupBtn div{
    width: 138rpx;
    line-height: 58rpx;
    border-radius: 60rpx;
    font-size: 28rpx;
    text-align: center;
  }
  .pop-cel{
    color: #323232;
    border: 1rpx solid #323232;
  }
  .pop-ent{
    color: #f44e40;
    border: 1rpx solid #f44e40;
  }
</style>
